<template>
  <div class="sales">
    <el-form ref="salesForm" :rules="rules" :model="form" label-width="120px" style="width:500px;padding:20px;">
      <el-form-item label="会员卡号">
        <el-input placeholder="请输入会员卡号" v-model="form.num">
          <el-button slot="append" @click="onSearch" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="会员名">
        <el-input disabled v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会员级别">
        <el-input disabled v-model="form.level"></el-input>
      </el-form-item>
      <el-form-item label="消费类别">
        <el-radio-group v-model="form.radio">
          <el-radio v-for="item in form.type" :key="item.id" :label="item.id" @change="typeChange">{{item.value}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="消费金额">
        <el-input v-model="form.amount"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交订单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        id: '',
        num: '',
        name: '',
        level: '',
        radio: 3,
        radioChecked: '消费',
        type: [
          {
            id: 0,
            value: '开卡'
          },
          {
            id: 1,
            value: '充值'
          },
          {
            id: 2,
            value: '购物'
          },
          {
            id: 3,
            value: '消费'
          }
        ],
        amount: '',
        theme: 'money'
      },
      rules: {
        num: [
          { required: true, message: '请输入会员卡号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '名字不能为空', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '会员级别不能为空', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入本次消费金额', trigger: 'blur' },
          { min: 1, message: '金额不能小于1', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    typeChange() {
      var radioValue = ['开卡', '充值', '购物']
      this.form.radioChecked = radioValue[this.form.radio]
    },
    onSubmit() {
      // this.$refs['salesForm'].validate((valid) => {
      //     if (valid) {
      //       alert('submit!');
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
      axios.post('http://127.0.0.1:8003/amount-create', this.form).then(res => {
          if (res.data.data.length > 0) {
            this.$message({
              type: 'success',
              message: '销售成功！'
            })
          } else {
            this.$message({
              type: 'info',
              message: '销售失败！'
            })
          }
        })
    },
    onSearch() {
      let customerNum = this.form.num
      if (customerNum == '') {
        this.$message({
          type: 'warning',
          message: '请输入会员卡号！'
        })
      } else {
        axios.get('http://127.0.0.1:8003/customer-get-one', {
          params: {
            customerNum
          }
        }).then(res => {
          if (res.data.data.length > 0) {
            this.form.id = res.data.data[0].Id
            this.form.num = res.data.data[0].CustomerNum
            this.form.name = res.data.data[0].CustomerName
            this.form.level = res.data.data[0].CustomerLevel
            this.$message({
              type: 'success',
              message: '查询成功！'
            })
          } else {
            this.$message({
              type: 'info',
              message: '会员不存在！'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sales {
  background-color:#fff
}
</style>
